<template>
	<div>
		<el-form :model="searchData" ref="ruleForm" inline  size="small"  class="header">
			<el-form-item>
				<el-select v-model="searchData.school_id" placeholder="请选择所属学校" clearable size="small">
					<el-option v-for="item in schoolData" :key="item.id" :label="item.school_name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item>
				<el-input type="text" v-model="searchData.key" placeholder="请输入关键字" clearable size="small"></el-input>
			</el-form-item>
			
			<el-form-item>
				<el-button type="primary" size="mini" icon="el-icon-search" @click="getTeacherList">搜索</el-button>
			</el-form-item>
			
			<el-form-item class="addBtn">
				<el-button type="primary" size="mini" icon='el-icon-plus' @click='addRechargeClick'>新增</el-button>
			</el-form-item>
		</el-form >

		<div class="table-wrap">
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="school_name" label="所属学校" align="center">
					<template slot-scope="scope">
						<span class="name" @click.stop="toDetail(scope.row)">{{scope.row.school_name}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="realname" label="教师姓名" align="center"></el-table-column>
				<el-table-column prop="score" label="教师分数" align="center"></el-table-column>
				<el-table-column prop="status" label="是否有效" align="center">
					<template slot-scope="scope">
						{{scope.row.status | statusMap}}
					</template>
				</el-table-column>
				<el-table-column prop="desc" label="描述" align="center"></el-table-column>
				<el-table-column label="操作" align="center" min-width="120">
					<template slot-scope="scope">
						<el-button type="text" @click="scoreClick(scope.row)">分配积分</el-button>
						<el-button type="text" @click="editRechargeClick(scope.row)">编辑</el-button>
						<el-button type="text" @click="deleteRechargeClick(scope.row)">删除</el-button>
						<el-button type="text" @click="resetPassWord(scope.row)">重置密码</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<common-pagination v-if='total > 10' :total="total" :size="searchData.size" @size-change="handelPagesizeChange"
			@page-change="handlePageChange"></common-pagination>

		<common-dialog :title="dialogTitle" :dialogVisible="dialogVisible" @cancel="dialogVisible = false"
			@confirm="dialogConfirmClick" @dialog-close="dialogClose" dialogWidth="500px">
			<el-form :model="teacherInfo" :rules="rules" ref="ruleForm" label-width="80px">
				<el-form-item label="所属学校" prop="school_id">
					<el-select v-model="teacherInfo.school_id" placeholder="请选择所属学校" clearable size="small"
						class="width-100">
						<el-option v-for="item in schoolData" :key="item.id" :label="item.school_name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="教师姓名" prop="realname">
					<el-input type="text" v-model="teacherInfo.realname" placeholder="请输入教师名称"></el-input>
				</el-form-item>
				
				<el-form-item label="用户名" prop="username">
					<el-input type="text" v-model="teacherInfo.username" :disabled='dialogType == "edit"' placeholder="请输入用户名"></el-input>
				</el-form-item>
				
				<el-form-item label="登录密码" :prop='dialogType == "add" ? "password" :""' v-if='dialogType !== "edit"'>
					<el-input type="password" v-model="teacherInfo.password"  placeholder="请输入登录密码"></el-input>
				</el-form-item>
				
				<el-form-item label="描述">
					<el-input
					  type="textarea"
					  :autosize="{ minRows: 2}"
					  show-word-limit
					  placeholder="请输入描述"
					  v-model="teacherInfo.desc">
					</el-input>
				</el-form-item>

			</el-form>
		</common-dialog>
		
		<common-dialog title="分配积分" :dialogVisible="scoreDialogVisible" @cancel="scoreDialogVisible = false"
			@confirm="scoreDialogConfirmClick" @dialog-close="dialogClose" dialogWidth="500px">
			<el-form :model="scoreInfo" :rules="scoreRules" ref="scoreForm" label-width="80px">
				<el-form-item label="分配积分" prop="score">
					<el-input-number v-model="scoreInfo.score" size="small" :min="0" placeholder="请输入分配积分" style="width: 200px;"></el-input-number>
				</el-form-item>
		
				<el-form-item label="积分状态" prop="type">
					<el-radio-group v-model="scoreInfo.type">
					  <el-radio label="1">增加</el-radio>
					  <el-radio label="2">减少</el-radio>
					</el-radio-group>
				</el-form-item>
		
				<el-form-item label="积分描述" prop='desc'>
					<el-input
					  type="textarea"
					  :autosize="{ minRows: 2}"
					  show-word-limit
					  placeholder="请输入积分描述"
					  v-model="scoreInfo.desc">
					</el-input>
				</el-form-item>
			</el-form>
		</common-dialog>
	</div>
</template>

<script>
	import CommonDialog from '@/components/CommonDialog';
	import CommonPagination from '@/components/CommonPagination';
	import {
		schoolList
	} from '@/api/school';
	import {
		teacherList,
		teacherOperate,
		teacherDelete,
		teacherScoreEdit,
		teacherReset
	} from '@/api/teacher';
	import {
		statusList,
		vipList
	} from '@/jslibs/enum';
	export default {
		name: 'messagepush',
		data() {
			return {
				statusList,
				vipList,
				tableData: [],
				total: 0,
				searchData: {
					page: 1, //第几页
					size: 10,
					school_id:"",
					key:""
				},
				teacherInfo: {},
				dialogVisible: false,
				dialogTitle: '',
				dialogType: '',
				scoreInfo:{
					score:undefined,
					type:"",
					desc:""
				},
				scoreDialogVisible:false,
				schoolData:[],
				rules: {
					school_id: [{
						required: true,
						message: "请选择所属学校",
						trigger: "change"
					}],
					realname: [{
						required: true,
						message: "请输入教师姓名",
						trigger: "blur"
					}],
					
					username: [{
						required: true,
						message: "请输入用户名",
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: "请输入登录密码",
						trigger: "blur"
					}]
				},
				scoreRules:{
					score: [{
						required: true,
						message: "请输入分配积分",
						trigger: "blur"
					}],
					type: [{
						required: true,
						message: "请选择积分状态",
						trigger: "change"
					}],
					desc: [{
						required: true,
						message: "请输入积分描述",
						trigger: "blur"
					}],
				}
			}
		},

		mounted() {
			const key = this.$route.query?.key;
			const schoolId = this.$route.query?.schoolId;
			this.searchData.key = key || "";
			this.searchData.school_id = Number(schoolId) || "";
			this.getSchoolList()
			this.getTeacherList();
		},

		methods: {
			async getTeacherList() {
				const {
					status,
					data
				} = await teacherList(this.searchData);
				if (status !== 200) return
				if (data.code == 200) {
					this.tableData = data?.data?.list || [];
					this.total = data?.data?.total || 0;
				} else {
					this.tableData = [];
					this.total = 0
					this.$message.warning(data?.message || '获取失败');
				}
			},
			
			async getSchoolList() {
				const {
					status,
					data
				} = await schoolList({page: 1,size: 1000});
				if (status !== 200) return
				if (data.code == 200) {
					this.schoolData = data?.data?.list || [];
				} else {
					this.schoolData = [];
					this.$message.warning(data?.message || '获取失败');
				}
			},

			addRechargeClick() {
				this.teacherInfo = {};
				this.dialogType = 'add';
				this.dialogTitle = '新增教师';
				this.dialogVisible = true;
			},

			editRechargeClick(row) {
				this.teacherInfo = JSON.parse(JSON.stringify(row));
				this.dialogType = 'edit';
				this.dialogTitle = '编辑教师';
				this.dialogVisible = true;
			},

			//删除
			deleteRechargeClick(row) {
				this.$confirm('是否删除该教师?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async() => {
					const postData = {id: row.id}
					const {
						status,
						data
					} = await teacherDelete(postData);
					if (status === 200) {
						if (data.code == 200) {
							this.getTeacherList();
							this.$message.success("删除教师成功");
							this.dialogVisible = false;
						} else {
							this.$message.warning(data?.msg || "删除教师失败");
						}
					}
				}).catch(() => {
				
				});
			},
			
			//分配积分
			scoreClick(row){
				this.scoreInfo.id = row.id;
				this.scoreInfo.score = row.score || undefined;
				this.scoreDialogVisible = true;
			},
			
			//确定操作
			async dialogConfirmClick() {
				this.$refs.ruleForm.validate((flag) => {
					if (flag) {
						this.handleSubmit()
					}
				})
			},
			
			//确定分配积分
			scoreDialogConfirmClick(){
				this.$refs.scoreForm.validate(async(flag) => {
					if (flag) {
						const {
							status,
							data
						} = await teacherScoreEdit(this.scoreInfo);
						if (status === 200) {
							if (data.code == 200) {
								this.getTeacherList();
								this.$message.success("积分分配成功");
								this.scoreDialogVisible = false;
							} else {
								this.$message.warning(data?.msg || "积分分配失败");
							}
						}
					}
				})
			},

			async handleSubmit() {
				switch (this.dialogType) {
					case 'add': {
						const {
							status,
							data
						} = await teacherOperate(this.teacherInfo);
						if (status === 200) {
							if (data.code == 200) {
								this.getTeacherList();
								this.$message.success("新增教师成功");
								this.dialogVisible = false;
							} else {
								this.$message.warning(data?.msg || "新增教师失败");
							}
						}
						break
					}
					case 'edit': {
						const {
							status,
							data
						} = await teacherOperate(this.teacherInfo);
						if (status === 200) {
							if (data.code == 200) {
								this.getTeacherList();
								this.$message.success("编辑教师成功");
								this.dialogVisible = false;
							} else {
								this.$message.warning(data?.msg || "编辑教师失败");
							}
						}
						break;
					}
				}
			},
			
			//重置密码
			resetPassWord(row){
				this.$confirm('是否重置密码?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async() => {
					const postData = {id: row.id}
					const {
						status,
						data
					} = await teacherReset(postData);
					if (status === 200) {
						if (data.code == 200) {
							const password = data?.data?.password;
							const message = `密码重置为：${password}`
							this.$alert(message, '重置密码', {
							  confirmButtonText: '确定',
							});
						} else {
							this.$message.warning(data?.msg || "重置密码失败");
						}
					}
				}).catch(() => {
				
				});
			},

			dialogClose() {
				this.dialogVisible = false;
				this.scoreDialogVisible = false;
				this.teacherInfo = {};
				this.resetFormData()
			},

			resetFormData() {
				this.$refs.ruleForm?.resetFields()
				this.$refs.scoreForm?.resetFields()
			},

			handelPagesizeChange(size) {
				this.searchData.size = size;
				this.getTeacherList();
			},
			handlePageChange(page) {
				this.searchData.page = page;
				this.getTeacherList();
			},
			toDetail(row){
				this.$router.push({
					path:"/schoolList",
					query:{
						key:row?.school_name
					}
				});
			}
		},

		components: {
			CommonDialog,
			CommonPagination
		}
	}
</script>

<style lang="less" scoped>
	@import '~@/assets/styles/variables.less';

	.addBtn {
		float: right;
	}
	.dialog-body-wrap {
		text-align: center;

		.input-wrap {
			display: flex;
			align-items: center;
			margin-bottom: 20px;

			label {
				margin-right: 30px;
				width: 110px;
				text-align: right;
			}

			.recharge_money_input,
			.recharge_amount_input {
				width: 194px;
			}
		}
	}
	.name{
		cursor: pointer;
		color: #FF8A00;
	}
</style>